import React, { useState } from 'react'
import { Toast, NavBar } from 'react-vant';
import { CommentO } from '@react-vant/icons'
import { Input, Cell, Button, hooks } from 'react-vant';
import { useSelector } from 'react-redux';
import { checkCode, getCode } from '../../api';
import { useNavigate } from 'react-router-dom';

export default function Step2() {

    let { tel } = useSelector(state => state.user)
    let [telCode, setTelCode] = useState('')
    let navigate = useNavigate()
    const [state, updateState] = hooks.useSetState({
        tel: '',
    })
    function isValidYZM(phone) {
        const reg = /^\d{5}$/;
        return reg.test(phone);
    }

    const getYZM = () => {
        console.log({ tel });
        getCode({ tel }).then(res => {
            console.log(res.data);
            setTelCode(res.data.data)
        })
    }

    const Next = () => {
        console.log(666, telCode, tel);
        checkCode({ telcode: telCode, tel: tel }).then(res => {
            console.log(res);
            if (res.data.code === '200') {
                navigate('/regist/step3')
            }
        })
    }

    return (
        <div>
            <NavBar
                title="京东注册"
                leftText="返回"
                onClickLeft={() => Toast('返回')}
            />

            <Input
                prefix="短信验证码"
                suffix={<Button onClick={() => getYZM()} round size="small" type="primary">发送验证码</Button>}
                placeholder="请输入短信验证码"
                onChange={tel => updateState({ tel })}
                type='tel'
                value={state.tel}
            />

            {!isValidYZM(state.tel) && <Button disabled round type='info'>
                下一步
            </Button>}
            {isValidYZM(state.tel) && <Button round type='info' onClick={Next}>
                下一步
            </Button>}
        </div>
    )
}
